<!DOCTYPE html>
<html lang="en">
<!--
 书城项目第一阶段：表单验证
 实现目标如下
 验证用户名：必须要有自字母、数字、下划线组成，并且长度5~12位
 验证密码：必须要有自字母、数字、下划线组成，并且长度5~12位
 验证确认密码：同上
 邮箱验证：xxxxx@xxx.com
 验证码：目前需要自己输入，等以后学习到了服务器再搞真实的验证码！
 -->
<head>
    <meta charset="UTF-8">
    <title>书城OA系统注册页</title>
    <!--    引入浏览器地址栏 favicon.ico 图标，尺寸48*48；一般来说要把图标放在根目录下-->
    <link rel="shortcut icon" href="favicon.ico" />
    <!--    引入初始化样式，这是基本的css样式 -->
<!--    <link rel="stylesheet" href="css/base.css">-->
    <!--    引入注册页面自己的CSS样式-->
    <link rel="stylesheet" href="css/register.css">
    <script type="text/javascript" src="./jquery/jquery-3.6.0.js"></script>

<!--    <script type="text/javascript">-->
<!--        //测试JQuery引用是否成功，注意必须先有引入语句-->
<!--        $(document).ready(function(e) { alert('test!'); });-->
<!--    </script>-->

    <script type="text/javascript">
        $(function (){
            // 给注册绑定单击事件
            $("#sub_id_btn").click(function (){
                // 书城项目第一阶段：表单验证
                // 验证用户名：必须要有自字母、数字、下划线组成，并且长度5~12位
                //--1.获取用户名输入框内的文本信息
                var userNameText = $("#id_userName").val();
                //--2.创建正则表达式
                var userNamePatt = /^\w{5,12}$/;
                //--3.使用test（）方法验证
                if(!userNamePatt.test(userNameText)){
                    //4.提示用户输入非法
                    $("span.errorMsg").text("用户名非法！")

                    return false;//这句话的作用非常重要：当信息非法之后，防止页面跳转
                }
                // 验证密码
                var passwordText = $("#id_password").val();
                var passwordPatt = /^\w{5,12}$/;
                if(!passwordPatt.test(passwordText)){
                    $("span.errorMsg").text("密码格式非法！")
                    return false;
                }

                //确认密码和输入的密码相同
                //--1.获取确认框密码内容
                var repasswordText = $("#id_repassword").val();
                //--2.和输入密码比较
                if(repasswordText != passwordText){
                    $("span.errorMsg").text("密码输入不一致！");
                    return false;
                }

                // 邮箱验证：xxxxx@xxx.com
                //--1.获取邮箱内容
                var emailText = $("#id_email").val();
                //--2.创建正则表达式对象
                var emailPatt = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
                //--3.使用test（）方法验证
                if(!emailPatt.test(emailText)){
                    //--4.提示用户
                    $("span.errorMsg").text("邮箱格式不合法！");
                    return false;
                }

                // 验证码：目前需要自己输入，等以后学习到了服务器再搞真实的验证码！
                var codeText = $("#id_code").val();

                //去掉验证码前后的空格
                codeText = $.trim(codeText);

                if(codeText == "" || codeText ==null){
                    $("span.errorMsg").text("验证码不能为空！");
                    return false;
                }

                $("span.errorMsg").text("");//这个是一个细节，当输入从非法修改到合法后，错误信息提示也应该在从显示到不显示！
            });
        });
    </script>
</head>
<body class="background">
    <div class="reg_form">
        <div class="title"> <span class="errorMsg"></span> </div> <!-- 这个span标签此处专门用来处理显示用户输入错误信息的提示-->
        <form action="index.html">
            <ul>
                <li>
                    <label>用户名：</label><input type="text" class="inp" name="userName" id="id_userName"
                                              placeholder="请输入用户名" autocomplete="off" tabindex="1"> <!--autocomplete="off"禁止自动完成，即禁止输入预测 -->
                </li>
                <li>
                    <label>用户密码：</label><input type="password" class="inp" name="password" id="id_password"
                                               placeholder="请输入密码" autocomplete="off" tabindex="1">
                </li>
                <li>
                    <label>确认密码：</label><input type="password" class="inp" name="repassword" id="id_repassword"
                                               placeholder="确认密码" autocomplete="off" tabindex="1">
                </li>
                <li>
                    <label>电子邮件：</label><input type="text" class="inp" name="email" id="id_email"
                                               placeholder="请输入邮箱地址" autocomplete="off" tabindex="1">
                </li>
                <li>
                    <label>验证码：</label><input type="text" class="inp" id="id_code"
                                              autocomplete="off" tabindex="1"> <!--autocomplete="off"禁止自动完成，即禁止输入预测 -->
                </li>
                <li><input type="submit" value="注册" class="btn" id="sub_id_btn"></li>
            </ul>
        </form>
    </div>
</body>
</html>